<template>
  <div>
    <!--    面包屑导航区-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片视图区域-->
    <el-card>
      <!--提示区域-->
      <el-alert
              title="添加商品信息"
              center show-icon
              :closable="false"
              type="info">
      </el-alert>
      <!--步骤条-->
      <el-steps :space="200"
                :active="activeIndex - 0"
                finish-status="success"
                align-center>
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>

      <!--tab栏区域-->
      <el-form :model="addForm"
               :rules="addFormRules"
               ref="addFormRef"
               label-width="100px"
               label-position="top">
        <el-tabs :tab-position="'left'"
                 v-model="activeIndex">
          <el-tab-pane label="基本信息" name="0">
            <el-form-item label="商品名称"prop="goods_name">
              <el-input v-model="addForm.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格"prop="goods_price">
              <el-input v-model="addForm.goods_price"type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品重量"prop="goods_weight">
              <el-input v-model="addForm.goods_weight"type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品数量"prop="goods_number">
              <el-input v-model="addForm.goods_number"type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品分类"prop="">
<!--              <el-cascader-->
<!--                      expand-trigger="hover"-->
<!--                      v-model="value"-->
<!--                      :options="cateList"-->
<!--                      :props="cateProps"-->
<!--                      @change="handleChange"></el-cascader>-->
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品参数" name="1">商品参数</el-tab-pane>
          <el-tab-pane label="商品属性" name="2">商品属性</el-tab-pane>
          <el-tab-pane label="商品图片" name="3">商品图片</el-tab-pane>
          <el-tab-pane label="商品内容" name="4">
            <!--富文本编辑器-->
<!--            <quill-editor v-model="addForm.goods_introduce"></quill-editor>-->
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
  </div>

</template>

<script>
  export default {
    name: "add",
    data(){
      return {
        /*步骤条激活*/
        activeIndex:'0',
        /*添加商品的表单数据对象*/
        addForm:{
          /*商品名称*/
          goods_name:'',
          goods_price:0,
          goods_weight:0,
          goods_number:0,
          /*商品详情描述*/
          goods_introduce:''
        },
        /*添加商品表单数据验证规则*/
        addFormRules:{
          goods_name:[
            {required:true,message:'请输入商品名称',trigger:'blur'}
          ],
          goods_price:[
            {required:true,message:'请输入商品价格',trigger:'blur'}
          ],
          goods_weight:[
            {required:true,message:'请输入商品重量',trigger:'blur'}
          ],
          goods_number:[
            {required:true,message:'请输入商品数量',trigger:'blur'}
          ],

        },
        /*商品分类数据*/
        cateList:[],
        /*级联选择器的级联属性*/
        cateProps:{
          label:'cat_name',
          value:'cat_id',
          children:'children'
        }

      }
    },
    created() {
      this.getCateList()
    },
    methods:{
      /*获取商品分类数据*/
      async getCateList(){
        const { data:res } = await this.$http.get('categories')
        if(res.meta.status !== 200){
          return this.$message.error('获取失败')
        }
        this.cateList = res.data
      }
    }
  }
</script>

<style scoped>

</style>